<template>
	<div>
		<div class="btn-list-box">
			<p class="backgroundTitelBox">
				{{ $t('member.login_infor') }}
			</p>
			<el-button
				type="primary"
				icon="el-icon-refresh"
				:loading="refreshLoading"
				@click="refresh"
			>
				{{ $t('common.refresh') }}
			</el-button>
		</div>
		<el-table
			border
			v-loading="refreshLoading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			:data="dataList"
			style="margin-bottom:40px"
			:header-row-style="{ height: '24px', lineHeight: '24px' }"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				align="center"
				min-width="150"
				prop="loginTime"
				:label="$t('member.login_time')"
				show-overflow-tooltip
			></el-table-column>
			<el-table-column
				prop="loginStatus"
				align="center"
				:label="$t('member.login_status')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span v-if="scope.row.loginStatus === '1'">
						{{
							typeFilter(scope.row.loginStatus, 'loginStatusType')
						}}
					</span>
					<span v-else class="redColor">
						{{
							typeFilter(scope.row.loginStatus, 'loginStatusType')
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="loginIp"
				align="center"
				show-overflow-tooltip
			>
				<template slot="header">
					{{ $t('member.login_ip') }}
					<br />
					{{ $t('common.risk_control_level') }}
				</template>
				<template slot-scope="scope">
					<span v-if="scope.row.loginIp !== null">
						{{ scope.row.loginIp }}
					</span>
					<span v-else>-</span>
					<br />
					<span class="redColor">
						{{ $t('common.risk_control_level') }}：{{
							scope.row.ipControlName === null
								? $t('member.nothing')
								: scope.row.ipControlName === '否'
								? $t('common.no')
								: scope.row.ipControlName === '是'
								? $t('common.yes')
								: scope.row.ipControlName
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="ipAttribution"
				align="center"
				:label="$t('member.ip_attribution')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span v-if="scope.row.ipAttribution !== null">
						{{ scope.row.ipAttribution }}
					</span>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="loginReference"
				align="center"
				min-width="220"
				:label="$t('member.login_reference')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span v-if="scope.row.loginReference !== null">
						{{ scope.row.loginReference }}
					</span>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="deviceType"
				align="center"
				:label="$t('member.device_type')"
			>
				<template slot-scope="scope">
					{{ typeFilter(scope.row.deviceType, 'deviceType') }}
				</template>
			</el-table-column>
			<el-table-column
				prop="deviceNo"
				align="center"
				show-overflow-tooltip
			>
				<template slot="header">
					{{ $t('member.device_no') }}
					<br />
					{{ $t('common.risk_control_level') }}
				</template>
				<template slot-scope="scope">
					<span v-if="scope.row.deviceNo !== null">
						{{ scope.row.deviceNo }}
					</span>
					<span v-else>-</span>
					<br />
					<span class="redColor">
						{{ $t('common.risk_control_level') }}：{{
							scope.row.deviceNoControlName === null
								? $t('member.nothing')
								: scope.row.deviceNoControlName === '否'
								? $t('common.no')
								: scope.row.deviceNoControlName === '是'
								? $t('common.yes')
								: scope.row.deviceNoControlName
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="browseContent"
				align="center"
				min-width="220"
				:label="$t('member.browse_content')"
				show-overflow-tooltip
			></el-table-column>
			<el-table-column
				prop="location"
				align="center"
				:label="`${$t('common.gps_location_info')}`"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.location || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-show="!!total"
			class="pageValue"
			:current-page.sync="pageNum"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size.sync="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			dataList: [],
			refreshLoading: false
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		// 会员登录日志查询
		loadData(val) {
			this.refreshLoading = true
			this.$api
				.getLogMemberLoginLog({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.parentData
				})
				.then((res) => {
					const { record, totalRecord } = res?.data
					this.dataList = record || []
					this.total = totalRecord || 0
				})
				.finally(() => {
					this.refreshLoading = false
				})
		},
		refresh() {
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
.btn-list-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.backgroundTitelBox {
		width: 180px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: #000;
		color: rgb(255, 255, 255);
		margin: 20px;
		margin-left: 0;
	}
}
.pageValue {
	text-align: right;
}
</style>
